<template>
    <div>
        <div
            class="share-main"
            ref="imageWrapper"
            v-if="imageWrapperShow"
        >
            <slot>
                <div class="user-info-box">
                    <img
                        class="user-img"
                        :src="'data:image/png;base64,'+headerImgUrl"
                        @load="makeReady"
                    />
                    <div class="user-info">
                        <div class="user-name-id">{{decodeURI(userInfo.nick_name)}} <span class="id-color">邀请码：{{userInfo.id}}</span></div>
                        <div class="user-tips">我已领了这款精品</div>
                    </div>
                </div>
                <div
                    class="qrcode"
                    ref="qrCodeUrl"
                ></div>
                <img
                    class="share-img"
                    :src="shareImgNow"
                    @load="makeShareImg"
                />
            </slot>
        </div>
        <div
            class="share-img-box"
            v-if="shareImgShow"
            @click.prevent.self="closeShareImg"
        >
            <div
                class="share-img-big"
                @click.prevent.self="closeShareImg"
            >
                <img :src="shareImg[previewImgNum]" />
            </div>
            <swiper
                :options="swiperOption"
                class="preview-img-list"
            >
                <swiper-slide
                    v-for="(item,index) of shareImg"
                    :key="index"
                >
                    <img
                        :src="item"
                        @click="previewImg(index)"
                    >
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
export default {
    name: 'ShareImg',
    props: ['shareImgShow', 'headerImgUrl', 'userInfo'],
    data() {
        return {
            swiperOption: {
                freeMode: true,
                slidesPerView: '4',
                spaceBetween: 10
            },
            shareImgNow: '',
            shareImgList: [
                require('@/assets/images/userCenter/share-img-1.jpg'),
                require('@/assets/images/userCenter/share-img-2.jpg'),
                require('@/assets/images/userCenter/share-img-3.jpg'),
                require('@/assets/images/userCenter/share-img-4.jpg'),
                require('@/assets/images/userCenter/share-img-5.jpg'),
                require('@/assets/images/userCenter/share-img-6.jpg')
            ],
            shareImg: [],
            imgNum: 0,
            previewImgNum: 0,
            headerImgReady: false,
            imageWrapperShow: true
        }
    },
    methods: {
        makeReady() {
            this.headerImgReady = true
            this.makeCode()
            this.shareImgNow = this.shareImgList[this.imgNum]
        },
        makeShareImg() {
            const that = this
            if (this.headerImgReady) {
                this.toImage()
            } else {
                setTimeout(() => {
                    that.makeShareImg()
                }, 500)
            }
        },
        toImage() {
            const that = this
            html2canvas(this.$refs.imageWrapper, {
                backgroundColor: null
            }).then(canvas => {
                let dataURL = canvas.toDataURL('image/png')
                this.shareImg.push(dataURL)
                if (this.imgNum < this.shareImgList.length - 1) {
                    this.imgNum++
                    this.shareImgNow = this.shareImgList[this.imgNum]
                } else {
                    this.imageWrapperShow = false
                }
            })
        },
        makeCode() {
            let routeHref = window.location.href
            routeHref = routeHref.replace(this.$route.path, '/')
            let qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: routeHref,
                width: 90,
                height: 90,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
        },
        previewImg(index) {
            this.previewImgNum = index
        },
        closeShareImg() {
            this.$emit('closeShareImg')
        }
    }
}
</script>

<style lang="stylus" scoped>
.share-main
    position absolute
    top -600px
    left -400px
    width 300px
    height 501px
    .user-info-box
        position absolute
        top 10px
        left 0
        right 0
        display flex
        align-items center
        padding 0 15px
        .user-img
            width 40px
            height 40px
            border-radius 100%
        .user-info
            flex 1
            margin-left 10px
            .user-name-id
                font-size 12px
                color #333
                .id-color
                    margin-left 10px
                    color #999
            .user-tips
                margin-top 5px
                font-size 12px
                color #333
    .share-img
        width 100%
    .qrcode
        position absolute
        bottom 35px
        right 20px
        width 90px
        height 90px
.share-img-box
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    z-index 9
    .share-img-big
        width auto
        height 70%
        margin 15px auto
        text-align center
        img
            height 100%
    .preview-img-list
        width 90%
        height 20%
        .swiper-slide img
            width 100%
            height 100%
</style>

